<template>
  <div class="pay-container">
    <h4>微信扫描下方二维码支付即可变强</h4>
    <img :src="payUrl"/>
  </div>
</template>


<script>
import * as vipApi from "../../../../api/vip"
import qrcode from "qrcode"
export default {
  data(){
    return{
      order_id:"",
      payUrl:"",
      queryPayState:{},
    }
  },
  created() {
    this.order_id=localStorage.getItem("order_id")
    vipApi.getPayUrlApi(this.order_id)
    .then(async res=>{
      console.log(res)
      let qrUrl=res.data.code_url
      qrcode.toDataURL(qrUrl, (err, dataUrl) => {
        this.payUrl = dataUrl;
      });
    })

    //轮询查询支付状态  要设置时间
    this.queryPayState=setInterval(()=>{
      console.log("轮询中")
      vipApi.checkPayStateApi(this.order_id)
      .then(res=>{
        if(res.data.state){
          this.$router.push({name:"paysuccess"})
          clearInterval(this.queryPayState)
        }
      })
    },200)
  },
  beforeDestroy() {
    clearInterval(this.queryPayState)
  },
}
</script>